<template>
  <el-input
    v-model.trim="inputValue"
    :placeholder="$t(placeholder)"
    @change="change"
    @input="$emit('input', $event)"
    style="width:250px"
    @keyup.enter.native="search"
  >
    <i slot="prefix" class="el-input__icon el-icon-search" @click="search"></i>
    <i slot="prefix" class="el-icon-circle-close" style="position: absolute;top:10px;margin-left:200px" @click="close" v-if="inputValue !=''"></i>
  </el-input>
</template>
<script>

import UTILS from "common/src/utils/utils";
/**
 * 模糊查询输入框
 */
export default {
  name: "KeywordInput",
  props: {
    value: {
      required: true,
      default: ''
    },
    placeholder:{
      default : 'courseArrange.professionTimeTable.plsInputNameOrCode'
    }
  },
  data() {
    return {
      inputValue: this.value // 解决IE11回车搜索时，value值没有实时更新的问题
    }
  },
  watch: {
      value: function(val){
          this.inputValue = val;
      }
  },
  methods: {
    search(){
      this.$emit("enter", this.inputValue);
    },
    change(){
      this.$emit('input', this.inputValue);
    },
    close() {
      this.inputValue = ''
      this.$emit('input', this.inputValue);
      this.search();
    }
  }
};

</script>
